@import '../../theme/index.scss';

.#{$hs-ui-prefix}-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: auto;
    height: $input-height-normal;
    padding: $padding $padding-8;
    border-radius: $input-border-radius;
    background: $input-bg-color;

    .#{$hs-ui-prefix}-input__prefix, .#{$hs-ui-prefix}-input__suffix {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .#{$hs-ui-prefix}-input__prefix {
        margin-right: $icon-text-margin-lr;
    }
    .#{$hs-ui-prefix}-input__suffix {
        margin-left: $icon-text-margin-lr;
    }

    .#{$hs-ui-prefix}-input__wrapper {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        input {
            width: 100%;
            height: 100%;
            border: none;
            background-color: transparent;
            font-size: $label-font-size;
    
            &::placeholder {
                font-size: $placeholder-font-size;
            }
        }
    }
}

.#{$hs-ui-prefix}-input-disabled {
    cursor: pointer;
    input {
        cursor: pointer;
    }
}

.#{$hs-ui-prefix}-input-shape-round {
    border-radius: 999rem;
}

.#{$hs-ui-prefix}-input-shadow-inset {
    box-shadow: $input-inset-box-shadow;
}
.#{$hs-ui-prefix}-input-shadow-outset {
    box-shadow: $input-box-shadow;
}
.#{$hs-ui-prefix}-input-shadow-none {
    box-shadow: none;
}